<template>
  <div class="dashboard-editor-container">
    <h1 class="htitle">欢迎使用 图书借阅管理系统</h1>
    <el-row style="text-align: center">
      <h3 class="htitle">分行图书统计数据</h3>
    </el-row>
    <el-row>
      <el-table
        v-loading="loading"
        :data="bookList"
        style="width: 100%; margin-bottom: 20px"
        row-key="deptId"
        border
        :tree-props="{ children: 'children' , hasChildren: 'hasChildren'}"
      >
        <el-table-column label="ID" align="center" prop="deptId" />
        <el-table-column label="名称" align="center" prop="title" />
        <el-table-column label="剩余" align="center" prop="bookCount" />
        <el-table-column label="借出" align="center" prop="loanBookCount" />
        <el-table-column label="总数" align="center" prop="totalBookCount" />
      </el-table>
    </el-row>
  </div>
</template>

<script>
import { countBooks } from "@/api/system/book";

export default {
  name: "Index",
  data() {
    return {
      // 统计数据
      bookList: [],
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          children: [
            {
              id: 31,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 32,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询书籍列表 */
    getList() {
      this.loading = true;
      countBooks().then((response) => {
        this.bookList = response.data;
        console.log(this.bookList);
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.htitle {
  color: #606266;
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
